<template>
	<view class="detail page bgf5 fs14 c00 pt10 px12" v-if="detail != null">
		<view class="px14 pb12 bgff">
			<view class="flex flexC flexB pt14 borb pb12">
				<text>订单编号：</text>
				<text>{{detail.order_no}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>订单状态</text>
				<text class="c41">{{detail.status_txt}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>店铺名称</text>
				<text>{{detail.shop_name}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>包 厢</text>
				<text>{{detail.room_name}}</text>
			</view>
			<view class="flex flexC flexB pt10" @click="call">
				<text>下单人</text>
				<text>{{detail.user.mobile}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>订单时间</text>
				<text>{{detail.create_time_text}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>开始时间</text>
				<text>{{detail.book_start}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>结束时间</text>
				<text>{{detail.book_end}}</text>
			</view>
		</view>
		<view class="bgff mt8 px14 pb20">
			<view class="flex flexC flexB borb py12">
				<text>订单金额</text>
				<text class="">￥{{detail.amount}}</text>
			</view>
			<view v-if="detial.tuan != ''" class="flex flexC flexB borb py12">
				<text>团购券使用</text>
				<text class="">{{detail.tuan}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>余额抵扣</text>
				<text class="">￥{{detail.balance}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>实付金额</text>
				<text class="cff0">￥{{detail.pay_amount}}</text>
			</view>
			<view v-if="detail.discount_name != ''" class="flex flexC flexB borb py12">
				<text>{{detail.discount_name}}</text>
				<text class="">{{detail.discount_desc}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>抖音券</text>
				<text class="">{{detail.dou_code}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>美团券</text>
				<text class="">{{detail.mt_code}}</text>
			</view>
			
			<view class="flex flexC flexB borb py12">
				<text>备注</text>
				<text class="">{{detail.mark}}</text>
			</view>
			
			
		</view>
		<view class="flex flexC flexJC px14 mt20" v-if="detail.status == 'payed'">
			<view class="aliC py12 w-17 cff bgb6 r40"  @click="refund">退 款</view>
		</view>
		<hFormAlert v-if="tagShow" type="digit"  title="退款" placeholder="请输入退款金额" @confirm="confirm" @cancel="cancel"></hFormAlert>
		
	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	
	export default {
		components: {hFormAlert},
		
		data() {
			return {
				title: 'Hello',
				order_no: '',
				detail:null,
				tagShow:false
				
			}
		},
		onLoad(option) {
			this.order_no = option.order_no;
			this.getDetail();
		},
		methods: {
			
			confirm(e){
				this.tagShow = false;
				console.info(e.text);
				let that = this;
				let param = {
					amount:e.text,
					order_no:this.order_no
				}
				this.$api.refund(param).then(res => {
				
					if (res.code == 1) {
						that.getDetail();
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			cancel(){
				this.tagShow = false;
			},
			
			call(){
				uni.makePhoneCall({
					phoneNumber:this.detail.user.mobile
				})
			},
			
			open(item){
				
			},
			
			refund(){
				this.tagShow = true;
			},
			
		
		

			getDetail() {

				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.shopOrderDetail(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
					} else {

					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bgb6 {
		background-color: #B6B6B6;
	}
</style>
